<template>
	<view class="feedback">
		<view class="feedback-plate-1">
			<view class="title">
				<view class="item">
					<text>*</text>
					<text>请描述您遇到的问题</text>
				</view>
			</view>
			<view class="content">
				<view class="item" v-for="(item,index) in itemArr" :class="isActive == index? 'active':''" :key="index" @click="onChange(index)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="feedback-plate-2">
			<u-input v-model="inputTxt" type="textarea" placeholder="尽量描述您遇到的问题和现象,我们将努力改进" height="220"></u-input>
			<view class="text-item">
				<text>{{inputTxt.length}}/300</text>
			</view>
		</view>
		<view class="feedback-plate-3">
			<view class="title">
				<text>图片补充</text>
				<text>（不超过三张）</text>
			</view>
			<view class="content">
				<u-upload :action="action" @on-success="onSuccess" name="file[]" ref="uUpload" max-count="3"></u-upload>
			</view>
		</view>
		<view class="feedback-plate-4">
			<view class="title">
				<view class="item">
					<text>*</text>
					<text>请描述您遇到的问题</text>
				</view>
				<input type="text" v-model="mobile" placeholder="邮箱/手机号/QQ" />
			</view>
		</view>
		<button class="mediun-btn" @click="onSubmit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemArr:[],
				inputTxt:'',
				isActive:0,
				action:this.$Url + '/index.php/app/utils/upload_pic',
				mobile:'',
				imgArr:[]
			};
		},
		created() {
			this.getFeedbackTag()
		},
		methods:{
			//请求意见标签
			getFeedbackTag(){
				uni.request({
				    url:this.$Url +'/index.php/app/GeneralList/index',
				    method:'POST',
				    data:{
				       type:4
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       this.itemArr = res.data.data
				    }
				})
			},
			//点击标签
			onChange(index){
				this.isActive = index
			},
			//上传成功图片
			onSuccess(e){
				this.imgArr = []
				let files = []
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				console.log(files)
				for(let i = 0;i < files.length; i++){
					this.imgArr.push(files[i].url)
				}
			},
			//提交资料
			onSubmit(){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/addFeedBack',
				    method:'POST',
				    data:{
				       question_id:this.itemArr[this.isActive].feedback_label_id,
					   suggestion:this.inputTxt,
					   pictures:this.imgArr.toString(),
					   connect_mobile:this.mobile
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if(res.data.status == 200){
							uni.showToast({
								title:'反馈成功'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},1500)
						}else{
							uni.showToast({
								title:res.data.msg,
								icon:'none'
							})
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.feedback{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	padding-bottom: 90upx;
	.feedback-plate-1{
		padding: 0 30upx;
		.title{
			height: 80upx;
			display: flex;
			align-items: center;
			text:first-child{
				font-size: 28upx;
				color: red;
			}
			text:last-child{
				color: #333;
				font-size: 28upx;
			}
		}
		.content{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.item{
				width: 193upx;
				height: 76upx;
				background-color: #fff;
				color: #999;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 30upx;
				margin-bottom: 20upx;
				border-radius: 50upx;
				border: 1px solid #dab768;
			}
			.active{
				background-color:#dab768;
				color: #fff;
				border: none;
			}
		}
	}
	.feedback-plate-2{
		height: 330upx;
		background-color: #fff;
		font-size: 24upx;
		color: #333;
		padding: 0 50upx;
		padding-top: 30upx;
		.text-item{
			display: flex;
			justify-content: flex-end;
		}
	}
	.feedback-plate-3{
		background-color: #fff;
		height: 540upx;
		padding: 0 30upx;
		margin-top: 20upx;
		.title{
			height: 80upx;
			color: #333;
			font-size: 28upx;
			text:last-child{
				color: #999;
			}
			display: flex;
			align-items: center;
		}
		.content{
			padding: 0 20upx;
		}
	}
	.feedback-plate-4{
		padding: 0 30upx;
		background-color: #fff;
		margin-top: 20upx;
		.title{
			display: flex;
			align-items: center;
			height: 100upx;
			text:first-child{
				color: red;
			}
			text{}
		}
		input{
			color: #333;
			font-size: 26upx;
			margin-left: 40upx;
		}
	}
}
</style>
